<template>
  <p-card :bordered="false">
    <div>
      详情
    </div>

    <div>
      <p-button type='primary' @click="showModal()" style="margin-bottom: 10px">新增</p-button>
    </div>

    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleDelete(record.id)">删除</a>
        <p-divider type="vertical" />
        <a @click="showModal(record)">编辑</a>
      </span>
    </p-table>

    <MemberSkillAdjustDetailModal :lineno='lineno' :selectedId='selectedId' ref='memberSkillAdjustDetailModal' @handleSuccess="handleSuccess"></MemberSkillAdjustDetailModal>

  </p-card>
</template>

<script type="text/javascript">
import { postAction, getAction, putAction, api, deleteAction } from "@/api/manage";
import MemberSkillAdjustDetailModal from './memberSkillAdjustDetailModal.vue'

export default {
  props: {
    lineno: String,
    selectedId: String || Number,
  },
  data() {
    return {
      /* table加载状态 */
      loading: false,      
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },      
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "员工编号",
          align: "center",
          dataIndex: "empno",
        },
        {
          title: "员工姓名",
          align: "center",
          dataIndex: "empname",
        }, 
        {
          title: "技能代码",
          align: "center",
          dataIndex: "skillCode",
        }, 
        {
          title: "技能名称",
          align: "center",
          dataIndex: "skillName",
        },  
        {
          title: "现生效日期",
          align: "center",
          dataIndex: "effectiveDate",
        },    
        {
          title: "现截止日期",
          align: "center",
          dataIndex: "expirationDate",
        },     
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },           
      ],
      dataSource: [],
      url: {
        list: '/mes-manpower/mesHrMemberSkillAdjustDetail/list',
        delete: '/mes-manpower/mesHrMemberSkillAdjustDetail',
      }
    }
  },

  watch: {
    selectedId(newVal, oldVal) {
      this.loadData()
    }
  },

  mounted() {

  },
  methods: {
    loadData(){
      this.loading = true;
      const params = {
        memberSkillAdjustId: this.selectedId
      }
      params.pageNo = this.ipagination.current;
      params.limit = this.ipagination.pageSize;      
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.data.records;
          this.ipagination.total = res.data.total;
        }
        if (res.code === 510) {
          this.$message.warning(res.msg);
        }
        this.$nextTick(() => {
          this.loading = false;
        })
      });       
    },
    // table 的分页事件
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.loadData()
    },    
   
    showModal(record){
      this.$refs.memberSkillAdjustDetailModal.showModal(record)
    },

    // 删除
    handleDelete(id) {
      deleteAction(`${this.url.delete}/${id}`).then(res => {
        if(res.success) {
          this.loadData()
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
      })
    },    
    handleSuccess(){
      this.loadData()
    }
  },
  components: {
    MemberSkillAdjustDetailModal
  }
}
</script>

<style lang="less" scoped>
</style>
